<!-- 设置教学区域 -->

<template>
  <div>
    <div class="button">
      <el-button type="primary" style="width: 15%; margin-bottom: 20px;" @click="addTeachArea()">新增安排</el-button>
    </div>
    <div class="wrapper">
      <el-table :data="locationData" size="mini" :stripe="true" :highlight-current-row="true">
        <el-table-column label="序号" type="selection"></el-table-column>
        <el-table-column prop="gradeNo" label="年级编号"></el-table-column>
        <el-table-column prop="gradeName" label="年级"></el-table-column>
        <el-table-column prop="teachbuildNo" label="教学楼编号"></el-table-column>
        <el-table-column prop="teachBuildName" label="教学楼名称"></el-table-column>

        <el-table-column prop="operation" label="操作" width="250px">
          <template #default="scope">
            <el-popconfirm
                title="确定删除吗？"
                @confirm="deleteById(scope.$index, scope.row)"
            >
              <template #reference>
                <el-button type="danger" size="mini" slot="reference">删除</el-button>
              </template>

            </el-popconfirm>
            <!-- <el-button type="primary" size="mini" @click="editById(scope.$index, scope.row)">编辑</el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="footer-button">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total"
        ></el-pagination>
      </div>
    </div>

    <!-- 弹出表单添加 -->
    <el-dialog title="设置教学区域" v-model="visible">
      <el-form label-position="left" label-width="80px" :model="addForm" :rules="formRules" ref="addFormRef">
        <el-form-item label="年级" prop="value1">
          <el-select v-model="addForm.value1" placeholder="请选择年级" @change="selectGrade" clearable>
            <el-option
                v-for="item in grade"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教学楼" prop="value2">
          <el-select
              v-model="addForm.value2"
              placeholder="请选择教学楼"
              @change="selectTeachbuild"
              clearable

          >
            <el-option
                v-for="item in teachbuild"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" style="margin-top: 30px">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="commit()">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted, getCurrentInstance} from 'vue';
import {useRouter} from 'vue-router';
import {useStore} from 'vuex';
import {ElMessage} from "element-plus";

const {proxy} = getCurrentInstance();
const store = useStore();
const router = useRouter();


const page = ref(1);
const total = ref(0);
const pageSize = ref(10);
const locationData = ref([]);
const teachBuildNo = ref('');
const gradeNo = ref('');
const grade = ref([
  {value: '01', label: '高一'},
  {value: '02', label: '高二'},
  {value: '03', label: '高三'}
]);
const teachbuild = ref([]);
const visible = ref(false);
const addForm = ref({
  value1: '', // 年级
  value2: '' // 教学楼
});
const formRules = reactive({
  value1: [{required: true, message: '请选择年级', trigger: 'blur'}],
  value2: [{required: true, message: '请选择教学楼', trigger: 'blur'}],
});
onMounted(() => {
  allLocation();
});

const addTeachArea = () => {
  queryTeachbuild();
  visible.value = true;
}
const validateForm = () => {
  return new Promise((resolve) => {
    proxy.$refs.addFormRef.validate((valid) => {
      resolve(valid);
    });
  });
};
// 添加教学区域
const commit = async () => {
  const valid = await validateForm();
  if (!valid) {
    ElMessage.error('请输入对应参数');
    return
  }
  if (addForm.value.value1 == '' || addForm.value.value2 == '') {
    ElMessage.error('请选择再提交');
  } else {
    await proxy.$api.setTeachArea({
      teachBuildNo: addForm.value.value2,
      gradeNo: addForm.value.value1
    })
    ElMessage({message: "添加成功", type: "success"});
    addForm.value.value1 = "";
    addForm.value.value2 = "";
    allLocation();
    visible.value = false;
  }
}

const selectGrade = () => {
  addForm.value.value1 = this.gradeNo;
}

const selectTeachbuild = () => {
  addForm.value.value2 = this.teachbuildNo;
}

// 所有教学区域安排
const allLocation = async () => {
  const result = await proxy.$api.allLocation(page.value);
  total.value = result.total;
  locationData.value = result.records;
}

const queryTeachbuild = async () => {
  const result = await proxy.$api.teachbuildinfoList();
  teachbuild.value.splice(0, teachbuild.value.length);
  result.map(v => {
    teachbuild.value.push({
      value: v.teachBuildNo,
      label: v.teachBuildName
    });
  });
}

const handleSizeChange = () => {
}

const handleCurrentChange = (v) => {
  page.value = v;
  allLocation();
}

// 删除
const deleteById = async (index, row) => {
  await proxy.$api.deleteLocationById(row.id);
  allLocation();
}

const editById = (index, row) => {

}
</script>

<style lang="less" scoped>
.footer-button {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
</style>
